<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">门禁管理</div>

    <!-- 搜索框 -->
    <el-form ref="form" :model="form" size="small">
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item>
            <el-col :span="12">
              <el-date-picker type="datetime" value-format="yyyy-MM-dd" placeholder="选择开始日期" v-model="form.dateLowerBound" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="11">
              <el-date-picker type="datetime" @change="dateChangeEndTime" value-format="yyyy-MM-dd" placeholder="选择结束日期" v-model="form.dateUpperBound" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input placeholder="请输入姓名或身份证号" v-model="form.eventID"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="form.subType" placeholder="全部人员进出类型">
              <el-option v-for="item in subTypeArr" :key="item.value" :value="item.value" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="form.subType" placeholder="全部人员关注类型">
              <el-option v-for="item in subTypeArr" :key="item.value" :value="item.value" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="form.subType" placeholder="全部出入口">
              <el-option v-for="item in subTypeArr" :key="item.value" :value="item.value" :label="item.name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜 索</el-button>
            <!--<el-button>重置</el-button>-->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="list">
      <el-card :body-style="{ padding: '0px' }" v-for="i in 5" :key="i">
        <img src="../../assets/images/menj.jpg" class="image">
        <div style="padding: 14px;">
          <div class="type-list">
            <div class="item" v-for="j in 4" :key="j"><i class="el-icon-info"></i><span class="label">车牌:</span><span>沪CBQD393</span></div>
          </div>
        </div>
      </el-card>
    </div>

    <el-pagination background @current-change="changeEventTable" :current-page.sync="form.page" :page-size="form.limit" layout="total, prev, pager, next,jumper" :total="totalCount" class="el-page-body" v-if="showList">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'door',
  data () {
    return {
      gHeight: this.$store.state.gHeight,
      form: {
        eventID: '', // 事件编号
        areaID: '', // 所属
        modType: '', // 场景类型
        eventState: '', // 处理状态
        subType: '', // 提交类型
        content: '', // 事件内容
        dateLowerBound: '', // 开始时间
        dateUpperBound: '', // 结束时间
        page: 1,
        limit: 10
      },
      totalCount: 0, // 总数
      tableData: [], // 列表数据
      eventStateArr: [],
      subTypeArr: [],
      showList: true,
      imgIsShow: false,
      videoIsShow: false,
      currentImg: '',
      currentVideo: ''
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.name !== 'eventSearchDetail') {
      this.$store.commit('keepOut')
    }
    next()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$store.commit('keepIn', 'eventSearch')
    })
  },

  mounted: function () {
    this.init()
  },

  methods: {
    // 监测结束时间
    dateChangeEndTime () {
      let startTime = this.timeToStamp(this.form.dateLowerBound)
      let endTime = this.timeToStamp(this.form.dateUpperBound)
      if (startTime > endTime) {
        this.$message({
          type: 'warning',
          message: '结束时间必须小于开始时间！'
        })
        this.form.dateUpperBound = ''
      }
    },
    showImg (item) {
      if (!item.eventImage) return

      this.currentImg = item.eventImage
      this.imgIsShow = true
    },
    showVideo (item) {
      if (!item.eventVideo) return

      this.currentVideo = item.eventVideo
      this.videoIsShow = true
    },
    // 日期转时间戳
    timeToStamp (time) {
      let d = new Date(time)
      let stamp = d.getTime()
      return stamp
    },
    // 页面初始方法
    init () {
      this.eventStateArr = this.$base.getConst('select', 'eventState')
      this.subTypeArr = this.$base.getConst('select', 'submitType')

      let userInfoRes = JSON.parse(this.$base.getSessionStorage('userInfo'))
      let currentUserRole = userInfoRes.userRole
      if (currentUserRole !== 1) {
        this.refreshTable()
      } else {
        this.showList = false
      }
    },
    // 所属变化时
    onAreaChange (val) {
      this.form.areaID = val
    },
    onSceneChange (val) {
      this.form.modType = val
    },
    onSubmit () {
      this.form.page = 1
    },
    // 切换页码
    changeEventTable: function (val) {
      this.form.page = val
      this.refreshTable()
      // this.$router.replace({name: 'eventSearch', query: this.form})
    }
  }
}
</script>

<style lang="less" scoped>
.el-pagination {
  margin: 0 10px;
}
.list {
  /deep/ .el-card {
    width: 23%;
    margin: 10px 10px;
    .image {
      width: 240px;
      height: 200px;
      padding: 14px;
    }
  }
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  .type-list {
    color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item {
      line-height: 26px;
      width: 48%;
      .label {
        display: inline-block;
        width: 50px;
        text-align: center;
      }
      span {
        color: #7c8696;
      }
    }
  }
}
</style>
